<template>
   <div class="basicInfoList basicInfoLayout">
            <!-- 账号信息-->
            <div class="accountInfo">
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">账号信息</div>
                </div>
                <el-row class="rows basic">
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">用户ID</label>
                            <span>{{customerInfo.id}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">子账号</label>
                            <span>{{customerInfo.subAccount}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">会员姓名</label>
                            <span>{{customerInfo.name}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">手机号码</label>
                            <span>{{customerInfo.phone}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">邮箱</label>
                            <span>{{customerInfo.email}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">三方登录</label>
                            <span>{{customerInfo.thirdLogin}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">用户昵称</label>
                            <span>{{customerInfo.nickname}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">身份证号</label>
                            <!-- <span v-if="isShowId == true">{{customerInfo.idCard | hideMiddle}}</span> -->
                            <span v-if="isShowId == false">{{customerInfo.idCard}}</span>
                            <span v-if="isShowId == true">{{idCardc}}</span>
                            <span class="seeId" @click="seeId">{{idCardText}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">账号状态</label>
                            <span>{{customerInfo.status}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!-- 真爱信息-->
            <div class="realLoveInfo">
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">真爱信息</div>
                </div>
                <el-row class="rows basic">
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">男士姓名</label>
                            <span>{{customerInfo.maleName}}</span>
                        </div>
                    </el-col>
                     <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">女士姓名</label>
                            <span>{{customerInfo.femaleName}}</span>
                        </div>
                    </el-col>
                     <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">专属编码</label>
                            <span>{{customerInfo.purchasedRing}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">已购钻戒</label>
                            <span>{{customerInfo.maleCalendarType}}</span>
                        </div>
                    </el-col>
                     <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">男士生日</label>
                            <span>{{customerInfo.femaleBirthday}}</span>
                        </div>
                    </el-col>
                     <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">女士生日</label>
                            <span>{{customerInfo.femaleBirthday}}</span>
                        </div>
                    </el-col>
                     <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">结婚纪念日</label>
                            <span>{{customerInfo.weddingDay}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">纪念日日手机号</label>
                            <span>{{customerInfo.memorialDayPhone}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">女士手机号</label>
                            <span>{{customerInfo.femalePhone}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">恋爱属性</label>
                            <span>{{customerInfo.sexOrientation}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!--标签 -->
            <div class="labelInfo">
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">标签</div>
                </div>
                <el-row class="rows basic">
                    <el-col>
                        <div class="items">
                            <label class="label">标签</label>
                            <span>{{customerInfo.id}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!-- 联系地址-->
             <div class="addressInfo" v-if="isBuy == 1">
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">联系地址</div>
                </div>
                <el-row class="rows basic">
                    <el-col>
                        <div class="items">
                            <label class="label">联系地址</label>
                            <span>{{customerInfo.address}}{{' '}}{{customerInfo.detailedAddress}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <!--会员信息 -->
            <div class="memberInfo">
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">会员信息</div>
                </div>
                <el-row class="rows basic">
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">会员等级</label>
                            <span>{{memberInfo.level}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">累计消费金额</label>
                            <span>{{memberInfo.totalPayableAmount}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">入会时间</label>
                            <span>{{memberInfo.joinDate}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">入会渠道</label>
                            <span>{{memberInfo.source}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">首次预约时间</label>
                            <span>{{memberInfo.firstReservationDate}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">首次预约店铺</label>
                            <span>{{memberInfo.firstReservationShop}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!--积分信息 -->
            <div class="IntegralInfo" v-if="isBuy == 1">
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">积分信息</div>
                </div>
                <el-row class="rows basic">
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">累计积分</label>
                            <span>{{IntegraInfo.totalScore}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">当前可用积分</label>
                            <span>{{IntegraInfo.availableScore}}</span>
                        </div>
                    </el-col>
                     <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">即将过期积分</label>
                            <span>{{IntegraInfo.expiringScore}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!-- 交易信息-->
            <div class="transactionInfo" v-if="isBuy == 1">
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">交易信息</div>
                </div>
                <el-row class="rows basic">
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">交易订单数</label>
                            <span>{{orderInfo.OrderQty}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">交易额</label>
                            <span>{{customerInfo.TotalAmount}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">累计退款订单</label>
                            <span>{{customerInfo.ReturnOrderQty}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">累计退款订单金额</label>
                            <span>{{customerInfo.TotalRefundAmount}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!--社交信息 -->
             <div class="socialInfo">
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">社交信息</div>
                </div>
                <el-row class="rows basic">
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">微信UnionID</label>
                            <span>{{customerInfo.weixinUnionId}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">QQ号</label>
                            <span>{{customerInfo.qq}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">微博账号</label>
                            <span>{{customerInfo.weibo}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">Facebook账号</label>
                            <span>{{customerInfo.facebook}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">微信号</label>
                            <span>{{customerInfo.weixinId}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">支付宝账号</label>
                            <span>{{customerInfo.alipay}}</span>
                        </div>
                    </el-col>
                </el-row>
             </div>
            <!-- 拓展信息-->
             <div class="expandInfo">
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">拓展信息</div>
                </div>
                <el-row class="rows basic">
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">预约来源</label>
                            <span>{{expandInfo.reservationSource}}</span>
                        </div>
                    </el-col>
                    <el-col :sm="12" :md="8" :lg="6">
                        <div class="items">
                            <label class="label">预约次数</label>
                            <span @click="bookInfo" class="bookCount">{{expandInfo.reservationCount}}</span>
                        </div>
                    </el-col>
                </el-row>
             </div>

    </div>
</template>

<script>
export default {
    name:'basicInfo',
    props:{
        customerInfo:{
            type:Object
        },
        memberInfo:{
            type:Object
        },
        orderInfo:{
            type:Object
        },
        cardInfo:{
            type:Object
        },
        IntegraInfo:{
            type:Object
        },
        expandInfo:{ //拓展
             type:Object
        },
        id:{
            type:String
        },
        isShowId:{
             type:Boolean
        },
        idCardText:{
            type:String
        },
        isReturn:{//在回访页面是否显示
            type:Boolean
        },
        isBuy:{
            type:Number
        },
        idCardc:{
            type:String
        }
    },
    data(){
        return{
            //idCard:this.customerInfo.idCard
            idCard:'',
        }
    },
    created(){
        //this.getIdCard()
        //cosole.log('idCard',this.idCard)
    },
    methods:{
        bookInfo(){
            this.$emit('bookInfo')
        },
        seeId(){
             this.$emit('seeId')
        },
        getIdCard(){
            this.idCard = this.customerInfo.idCard;
            console.log('this.idCard',this.idCard)
        }
       
    },
    created(){
        //console.log('你猜猜Id传过来没有',this.id)
    },
    /*filters:{
         hideMiddle(val) {
            console.log('身份证',val, typeof val);
            var str= val;
            var aa = str.substring(0,3);
            console.log('456568452166548542'.substring(0,4))
            var bb = val.substring(val.length-3)
            console.log('aaaaaaaaaaaaaaaa',aa);
            console.log('bbbbbbbbbbbbbbbb',bb);
            var cc = aa + '****' + bb;
            console.log('cccccccccccccc',cc);
            //return `${val.substring(0,3)}****${val.substring(val.length-3)}`
            return cc
        }   
    },*/
}
</script>

<style>
/*基本信息*/
.basicInfoList{
  background-color:#fff
}
.basicInfoList .el-row label{
  color: #888;
  font-size:14px
}
.basicInfoList .el-row span{
  color: #222;
  font-size:14px
}
.basicInfoList .basic .el-col:last-child .items{
  margin-bottom:0
}
.bookCount{
    cursor: pointer;
    color: #7e6b5a !important
}
.seeId{
    display: inline-block;
    width: 40px;
    height: 20px;
    line-height: 20px;
    border:1px #ddd solid;
    border-radius: 4px;
    text-align: center
}
</style>



